<template>
  <div>
    <Form :option="formOptions" @model="register"></Form>
    <ElButton type="primary" @click="insert">添加</ElButton>
  </div>
  <Table
    :data="data"
    :options="options"
    @curronRow="selRow"
    :total="1000"
    @pageChange="pageChange"
    :stripe="true" 
    empty-text="暂无数据1234567"
  ></Table>
  <bj></bj>
</template>
<script setup lang="jsx">
import Table from "./components/Table/index.vue";
import Form from "./components/Form/index.vue";
import bj from "./bj.vue";
import { ElButton, ElTag ,ElRate} from "element-plus";
import { useForm } from "../hooks/useForm";
import Map from "./components/map.vue"
import { ref, reactive,watch } from "vue";
const { register, FormParams } = useForm();
const options = [
  {
    field: "selection",
  },

  {
    label: "序号",
    field: "index",
    width: "100px",
  },
  {
    label: "姓名",
    field: "name",
  },
  {
    label: "年龄",
    field: "age",
    attrs:{
      sortable:true
    },
    slots: (obj) => {
      return <ElTag type="success">{obj.row.age}</ElTag>;
    },
  },
  {
    label: "操作",
    field: "action",
    slots: (obj) => {
      console.log(obj, 40);
      return (
        <>
          <ElButton type="primary" onClick={() => test(obj.row)}>
            修改
          </ElButton>
          <ElButton type="success">查看</ElButton>
          <ElButton type="danger">删除</ElButton>
        </>
      );
    },
  },
];

const data = reactive([
  { name: "张三", age: 20 },
  { name: "张三1", age: 21 },
  { name: "张三1", age: 21 },
]);

function selRow(row) {
  // console.log(row, 42);
}
function test(event) {
  console.log(123, event);
  formOptions.value[0].value = event.name;
  formOptions.value[1].value = event.age;
  formDataParams.name = event.name;
  formDataParams.value = event.age;
}
const formDataParams = reactive({
  name: "张三",
  value: 20,
});
const formOptions = ref([
  {
    field: "name",
    label: "姓名",
    value: formDataParams.name,
    component: "Input",
    span: 6,
  },
  {
    field: "age",
    label: "年龄",
    component: "Select",
    value: formDataParams.value,
    componentProps: {
      options: [
        { label: "123", value: 1 },
        { label: "456", value: 2 },
      ],
    },
    span: 6,
  },

  {
    field: "city",
    label: "居住地",
    component: "cascader",
    componentProps: {
      options: [
        {
          value: "北京",
          label: "北京",
          children: [
            {
              value: "朝阳",
              label: "朝阳",
            },
            {
              value: "海淀",
              label: "海淀",
            },
          ],
        },
        {
          value: "天津",
          label: "天津",
          children: [
            {
              value: "南开",
              label: "南开",
            },
            {
              value: "河西",
              label: "河西",
            },
          ],
        },
      ],
    },
    span: 6,
  },{
    field: "map",
    label: "地图",
    component: 'custom',
    custom:{
      component:Map,
    },
    span: 24,
  }
]);
watch(
  formOptions,
  () => {
    console.log(formOptions.value, 54);
  },
  {
    deep: true,
  }
);
function insert() {
  console.log("添加");
  console.log(FormParams.value, 74);
  let datas = { ...FormParams.value };
  data.push(datas);
}

function pageChange(val) {
  console.log("pageChange", val);
}
</script>
